<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        padding: 50px;
        background-color: green;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <!-- 
      方法事件处理器有没有加括号的情况：
          1. 没加括号
              方法会自动收到一个 事件对象 这个参数
          2. 加了括号
              这时就看传递了什么参数

      加了括号且又需要收到事件对象这个参数该如何办
          可以使用特殊变量 $event ,将该变量主动传递即可

      事件修饰符：
        .stop
          阻止冒泡
        .prevent
          阻止默认行为
        .self
          触发事件的元素与绑定事件的元素必须一致时，才触发
          target 与 currentTarget
            target - 触发事件的元素
            currentTarget - 绑定事件的元素
        .capture
          让事件传播方式修改为捕获
        .once
          事件只绑定一次就失效
        .passive
          告诉浏览器，我绝对不会去阻止默认行为。
      
      按键修饰符
        .enter
        .tab
        .delete (捕获“Delete”和“Backspace”两个按键)
        .esc
        .space
        .up
        .down
        .left
        .right

        PS: 在 Vue2 中，可以直接使用键码当成修饰符来使用，但是 Vue3 移除了
            <input type="text" @keyup.13="jump" />

      系统按键修饰符
        .ctrl
        .shift
        .alt
        .meta

        .exact 
          精准匹配系统按键修饰符
      
      鼠标按钮修饰符
        .left
        .right
        .middle
     -->
    <div id="app">
      <button @click.ctrl.exact="jump">Jump</button>

      <input type="text" @keyup.enter="jump" />

      <button @click="fn1">点我1</button>
      <button @click="fn1($event, '张三')">点我2</button>

      <div class="box" @click="parent">
        <button @click.stop="son">点我</button>

        <a href="https://www.baidu.com" @click.prevent.stop="jump">Jump</a>
      </div>

      <hr />

      <div
        @scroll.passive="onScroll"
        style="border: 1px solid #000; height: 200px; overflow-y: auto"
      >
        <div style="height: 1000px"></div>
      </div>
    </div>

    <script src="../../lib/vue3.js"></script>
    <script>
      Vue.createApp({
        methods: {
          onKeyup(event) {
            console.log("onKeyup", event);
            if (event.keyCode === 13) {
              this.jump();
            }
          },

          fn1(event, name) {
            console.log("fn1", event);
          },

          parent(event) {
            console.log("parent");
            console.log("target", event.target);
            console.log("currentTarget", event.currentTarget);
          },

          son() {
            console.log("son");
          },

          jump() {
            alert("jump");
          },

          onScroll() {
            console.log("onScroll");
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
